<template>
  <!--描述题-->
  <view class="Question f_1 scroll-y">
    <view class="title-box">
      <text class="typeName fs_0" :style="{fontSize: fontSize+'rpx'}">{{ title }}</text>
      <text class="title" :style="{fontSize: fontSize+'rpx'}">{{ answerNumber }}、{{ item.itemText }}</text>
    </view>
    <view class="options-box" v-if="!disabled">
      <!--富文本工具栏start-->
      <view class="container">
        <view class="page-body">
          <view class='wrapper'>
            <view class='toolbar' @tap="format"
                  style="height: 70rpx;overflow-y: auto;display: flex;flex-direction: row;justify-content: space-around;">
              <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu"
                    data-name="bold">
              </view>
              <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti"
                    data-name="italic">
              </view>
              <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
                    data-name="underline"></view>
              <!-- #ifndef MP-BAIDU -->
              <view :class="formats.align === 'left' ? 'ql-active' : ''"
                    class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
              <!-- #endif -->
              <view :class="formats.align === 'center' ? 'ql-active' : ''"
                    class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
              <view :class="formats.align === 'right' ? 'ql-active' : ''"
                    class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
              <view class="iconfont icon-shanchu" @tap="clear"></view>
            </view>
          </view>
        </view>
      </view>
      <!--富文本工具栏end-->
      <editor ref="myEditor" id="editor" class="ql-container" placeholder="请输入答案"
              @statuschange="onStatusChange"
              @ready="onEditorReady"
              @input="onEditorInput"
              :style="{ fontSize: fontSize + 'rpx !important', color: '#333' }">
      </editor>
      <view class="save-btn" v-if="!item.hasAnswer" @click="itemClick">确定</view>
    </view>
    <view class="question-text" v-else>
      <rich-text :nodes="answerVal"></rich-text>
    </view>
    <!--试题解析-->
    <AnswerAnalysis v-if="showAnswer && item.hasAnswer" :analysis="item.analysis" title="参考答案"></AnswerAnalysis>
  </view>

</template>
<script>
import AnswerAnalysis from "../AnswerAnalysis.vue";
import {topicTypes} from "../../enum";

export default {
  name: "DescribeQuestion",
  components: {AnswerAnalysis},
  props: {
    fontSize: {
      type: Number,
      default: 32,
    },
    item: {
      type: Object,
      required: true
    },
    answerNumber: {
      type: Number,  //题目序号
      default: 1
    },
    showAnswer: {
      type: Boolean,  //是否显示答案
      default: false
    },
    isShowScore: {
      type: Boolean, //是否展示分数
      default: false
    },

    disabled: {
      type: Boolean,  //是否禁用点击事件
      default: false
    }
  },
  computed: {
    title() {
      if (this.item?.type) {
        return this.topicTypes.find(type => type.value === this.item?.type).name;
      }
      return null
    }
  },
  data() {
    return {
      formats: {},
      readOnly: false,
      answerVal: "",
      topicTypes,
      editorCtx: null
    }
  },
  methods: {
    //editor 组件对应的 editorContext 实例
    onEditorReady() {
      this.$nextTick(() => {
        uni.createSelectorQuery().in(this).select('#editor').context((res) => {
          this.editorCtx = res.context
          this.editorCtx.setContents({
            html: this.answerVal,
            success: res => {
            }
          })
        }).exec()
      })
    },
    onEditorInput(e) {
      this.answerVal = e.detail.html
      this.$emit("updateAnswers", {index: this.answerNumber - 1, stuAnswer: this.answerVal, submit: false})
    },
    onStatusChange(e) {
      this.formats = e.detail
    },
    format(e) {
      let {
        name,
        value
      } = e.target.dataset
      if (!name) return
      this.editorCtx.format(name, value)
    },
    clear() {
      uni.showModal({
        title: '清空编辑器',
        content: '确定清空编辑器全部内容？',
        success: res => {
          if (res.confirm) {
            this.editorCtx.clear({
              success: function (res) {
              }
            })
          }
        }
      })
    },
    itemClick() {
      //已答题或者禁用
      if (this.hasAnswer || this.disabled) {
        return;
      }
      if (!this.answerVal) {
        uni.showToast({
          title: "请输入答案",
          icon: "none",
          duration: 2000
        });
        return
      }
      this.$emit("updateAnswers", {index: this.answerNumber - 1, stuAnswer: this.answerVal, submit: true})
    }
  },
  created() {
    this.answerVal = this.item.stuAnswer
  }
}
</script>

<style scoped lang="scss">
@import "./editor-icon.css";

.Question {
  padding: 18px;

  .typeName {
    border: 1px solid #37B874;
    box-sizing: border-box;
    border-radius: 20px 20px 20px 0;
    padding: 5rpx 15rpx;
    background-color: #F3FBF7;
    display: inline-block;
    height: fit-content;
    margin-right: 8px;
  }

  .title {
    color: #333333;
    line-height: 24px;
  }

  .options-box {
    margin-top: 40px;
    border: 2rpx solid #D2D2D2;
    border-radius: 16rpx;

    .container {
      padding-top: 13px;
      border-bottom: solid 1px #D2D2D2;
    }

    editor {
      padding: 24px;
    }

    .save-btn {
      background-color: #37B874;
      width: 60px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 12px;
      font-size: 14px;
      color: #FFFFFF;
      margin: 0 auto;
      margin-bottom: 16px;
    }
  }

  .question-text {
    background: linear-gradient(to bottom, #FBFFFB, #F6FFF7);
    padding: 14px 20px;
    margin-top: 9px;
    border-radius: 12px;
  }

  .answer {
    background: linear-gradient(180deg, #FBFFFB 0%, #F6FFF7 100%);
    border-radius: 12px;
    padding: 14rpx 40rpx;
    margin-top: 40px;

    label {
      color: #37B874;
    }

    .error {
      color: #FF3D31;
    }

    > view:nth-child(1) {
      margin-right: 24px;
    }
  }

}

</style>